<template>
  <div class="movie-cinema">
    <div class="header">
      <div class="city-box" @click="selectCity">
        <span class="city">{{city}}</span>
        <van-icon name="arrow-down" />
      </div>
      <div class="tabs">
        <van-tabs
          v-model="active"
          title-active-color="#fff"
          title-inactive-color="#ddd"
          route
        >
          <van-tab
            :title="item.title"
            class="tab-item"
            v-for="(item, index) in tabsData"
            :key="index"
            :to="{ name: item.routeName }"
          >
          </van-tab>
        </van-tabs>
      </div>
      <div class="search-box" @click="toSearch">
        <van-icon name="search" size="24px" color="#fff" />
      </div>
    </div>

    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex';
export default {
  name: "MovieCinema",
  data() {
    return {
      active: 0,
      tabsData: [
        {
          title: "热映",
          routeName: "Wellrece",
        },
        {
          title: "影院",
          routeName: "Cinema",
        },
        {
          title: "待映",
          routeName: "Tobeshown",
        },
        {
          title: "经典电影",
          routeName: "ClassicFilms",
        },
      ],
    };
  },
  computed:{
    ...mapState(['city'])
  },
  methods:{
    selectCity(){
      // 
      this.$router.push({name:'Citylist'});
    },
    toSearch(){
      this.$router.push({name:'Search'})
    }
  }
};
</script>

<style lang="less" scoped>
.header {
  box-sizing: border-box;
  background-color: #dd403b;
  width: 100%;
  height: 50px;
  position: fixed;
  top: 0;
  left: 0;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 999;
  // margin-top: 25px;
  .city-box {
    color: #fff;
    font-size: 16px;
    .van-icon-arrow-down {
      // border: 1px solid #000;
      margin-left: 4px;
    }
  }
  .tabs {
    /deep/ .van-tabs__nav {
      border: none;
      background-color: #dd403b;
    }
    /deep/ .van-tab {
      margin-right: 5px;
    }
    /deep/ .van-tab__text {
      font-size: 16px;
    }
    /deep/ .van-tab__text--ellipsis {
      // border: 1px solid #000;
      overflow: visible;
      display: block;
      white-space: nowrap;
    }
    /deep/ .van-tab--active {
      font-weight: bold;
    }
    /deep/ .van-tabs__wrap {
      // border: 1px solid #000;
      height: 50px;
      margin-top: 0px;
    }
    /deep/ .van-tabs__line {
      background-color: #fff;
      width: 18px;
      bottom: 0px;

    }
    /deep/.van-tabs__nav--line {
      // border: 1px solid #000;
      padding-bottom: 0;
    }
  }
}
</style>
